<template>
	<view>
		<!-- #ifdef H5 -->
		<view
			style="position: fixed;top: 44px;z-index: 1;width: 100%;background-color: #fff;display: flex;align-items: center;">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view style="position: fixed;top: 0;z-index: 1;width: 100%;background-color: #fff;display: flex;align-items: center">
		<!-- #endif -->
				<uni-search-bar placeholder="请输入标题查询" v-model="queryParam.title" @confirm="search" radius="5"
					cancelButton="none" @clear="search" style="flex: 1;"></uni-search-bar>
				<button size="mini" :hover-class="'buttons'"
					:style="{ backgroundColor: '#0097ff', border: 'none', color: '#fff', marginRight: '20rpx', height: '36px', lineHeight: '36px' }"
					@click="search">查询</button>
			</view>
			<view class="address_book">
				<view class="address_book_list" style="margin-top: 54px;">
					<view class="address_book_box" v-for="(item, index) in list" :key="index"
						@click="handleDetails(item)">
						<view class="address_book_box_left">
							<image src="../static/doing.png" mode=""
								style="width:75rpx;height: 75rpx;border-radius: 12rpx;">
							</image>
						</view>
						<view class="address_book_box_right">
							<view>
								<view :style="item.isReaded ? '' : 'font-weight: bold;'">
									{{ item.name || '' }}
								</view>
								<view class="fontColor" style="margin: 10rpx 0;">
									ID:{{ item.flowId || '' }} {{ item.status || '' }}
								</view>
								<view class="fontColor">
									{{ item.typeName || '' }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script setup>
import {
	ref
} from 'vue'
import {
	useList
} from '@/pages/use/useList';

const url = {
	list: '/m/flow/listDoing'
}
const {
	queryParam,
	list,
	search
} = useList({
	url: url,
	loadHock: true,
	isOnShow: true,
	queryParam: {
		op: 'search'
	}

})

const handleDetails = (item) => {
	uni.navigateTo({
		url: `/application/process?record=${JSON.stringify({ myActionId: item.myActionId })}`
	})
}
</script>
<style lang="scss" scoped>
.address_book {
	padding: 20rpx;
	display: flex;
	flex-direction: column;

	&_list {
		flex: 1;
		overflow-y: auto;
	}

	&_box {
		display: flex;
		margin-bottom: 20rpx;

		&_left {
			margin-right: 20rpx;
			display: flex;
			align-items: center;
		}

		&_right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid rgb(228, 228, 228);
			font-size: 32rpx;
			padding: 10rpx 0;
		}
	}
}

.fontColor {
	color: #8f8f94;
}

::v-deep .u-sticky {
	background-color: #fff;
}

// .buttons {
// 	background-color: "#31E6E1";
// 	border: "none";
// 	color: "#fff";
// }
</style>